﻿<link href="/UI/css/components/components.min.css" rel="stylesheet" />
<template>
    <div contenteditable="true"
         style="top:0;left:0;right:0;height:100%;"
         v-html="innerText"
         @focus="isLocked = true"
         @blur="isLocked = false;changeText()"
         @input="changeText">
    </div>
</template>
<script>
    vm={
        props: {
            value: {
                type: String,
                default: ''
            },
            return_type:{
                type:String,
                default:'text'
            },
            max_length: {
                type: Number,
                default:-1
            }
        },
        data:function(){
            return {
                innerText: this.value,
                isLocked: false
            }
        },
        watch: {
            'value':function(){
                if (!this.isLocked) {
                    this.innerText = this.value;
                }
            }
        },
        methods: {
            changeText:function(){
                var v=this.return_type == 'text' ? this.$el.innerText : this.$el.innerHTML;
                if (this.max_length > 0) {
                    v = v.substr(0, this.max_length);
                }
                this.value=v;
                this.$emit('input', v);
            }
        }
    }
</script>